﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>蓉记鲜鲜鲜微贺卡</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="~/Themes/RongJi/Style/greetingcard/css/app.css">
    <link rel="stylesheet" href="~/Themes/RongJi/Style/greetingcard/js/joyride-2.1.css">
    <style>
        .innerwrapper, .pageHeaderMini {
            display: none;
        }

        .form-control {
            margin-bottom: 5px;
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.428571429;
            color: #555555;
            vertical-align: middle;
            background-color: #ffffff;
            border: 1px solid #cccccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        }

            .form-control:focus {
                border-color: #66afe9;
                outline: 0;
                -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
                box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
            }

        .button {
            width: 80px;
            line-height: 28px;
            text-align: center;
            font-weight: bold;
            color: #fff;
            text-shadow: 1px 1px 1px #333;
            border-radius: 5px;
            position: relative;
            overflow: hidden;
        }

            .button.green {
                border: 1px solid #64c878;
                box-shadow: 0 1px 2px #b9ecc4 inset,0 -1px 0 #6c9f76 inset,0 -2px 3px #b9ecc4 inset;
                background: -webkit-linear-gradient(top,#90dfa2,#84d494);
                background: -moz-linear-gradient(top,#90dfa2,#84d494);
                background: linear-gradient(top,#90dfa2,#84d494);
            }

            .button.red {
                border: 1px solid #b42323;
                box-shadow: 0 1px 2px #e99494 inset,0 -1px 0 #954b4b inset,0 -2px 3px #e99494 inset;
                background: -webkit-linear-gradient(top,#d53939,#b92929);
                background: -moz-linear-gradient(top,#d53939,#b92929);
                background: linear-gradient(top,#d53939,#b92929);
            }

        .front-mask {
            background-color: rgba(0,0,0,0.5);
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            z-index: 99;
            display: none;
            text-align: center;
            z-index: 1;
        }

        .front-mask-content {
            max-width: 90%;
            background-color: white;
            margin: 30% auto;
            text-align: left;
            padding: 20px;
            border-radius: 4px;
        }

            .front-mask-content legend {
                font-size: 16px;
            }

            .front-mask-content div {
                font-size: 16px;
            }

        .la {
            float: left;
            width: 48%;
        }

        .ra {
            float: right;
            width: 48%;
        }
    </style>
</head>

<body>
    <body>
        <div class="cardBody cardIndex">
            <div class="audioPlayer">
                <a href="~/Themes/RongJi/Style/greetingcard/audio/0.mp3" title="" class="sm2_button"></a>
            </div>
            <div class="diyTool">
                <button id="goBack" onclick="history.go(-1)">发送</button>
            </div>
            <div class="scroll">
                <div class="headerImg">
                    <img src="~/Themes/RongJi/Style/greetingcard/css/cardIndex.jpg" alt="2015">
                </div>
                <ul>
                    <li class="so-awesome"><a href="/Purchase/ChooseGreetingCard?cardId=card1&orderNumber=@Request.QueryString["OrderNumber"]">
                        <img src="~/Themes/RongJi/Style/greetingcard/css/card1.jpg" alt=""></a></li>
                    <li><a href="/Purchase/ChooseGreetingCard?cardId=card2&orderNumber=@Request.QueryString["OrderNumber"]">
                        <img src="~/Themes/RongJi/Style/greetingcard/css/card2.jpg" alt=""></a></li>
                    <li><a href="/Purchase/ChooseGreetingCard?cardId=card3&orderNumber=@Request.QueryString["OrderNumber"]">
                        <img src="~/Themes/RongJi/Style/greetingcard/css/card3.jpg" alt=""></a></li>
                    <li><a href="/Purchase/ChooseGreetingCard?cardId=card4&orderNumber=@Request.QueryString["OrderNumber"]">
                        <img src="~/Themes/RongJi/Style/greetingcard/css/card4.jpg" alt=""></a></li>
                    <li><a href="/Purchase/ChooseGreetingCard?cardId=card5&orderNumber=@Request.QueryString["OrderNumber"]">
                        <img src="~/Themes/RongJi/Style/greetingcard/css/card5.jpg" alt=""></a></li>
                    <li><a href="/Purchase/ChooseGreetingCard?cardId=card6&orderNumber=@Request.QueryString["OrderNumber"]">
                        <img src="~/Themes/RongJi/Style/greetingcard/css/card6.jpg" alt=""></a></li>
                </ul>
            </div>
        </div>

        <div id="gameTip" class="front-mask" style="display: none;">
            <div class="front-mask-content">
                <fieldset data-role="controlgroup">
                    <legend>如果该用户不是您的微信好友，请填写对方手机号码，他将如期收到您送出的礼物。</legend>
                </fieldset>
                <div class="ui-grid-a">
                    <div>
                         <input type="hidden" id="orderNumber" value="@Request.QueryString["OrderNumber"]">
                         <input class="form-control" type="text" value="" placeholder="请输入您的姓名..." id="realName">
                          <input class="form-control" type="text" value="" placeholder="请输入好友的姓名..." id="friendName">
                        <input class="form-control" type="text" value="" placeholder="请输入好友的电话号码..." id="cellPhone">
                    </div>
                    <div style="text-align:center">
                        <input type="button" class="button green" id="sumbit" value="确定">
                        <input type="button" class="button red" id="cancel" onclick="CloseWindow()" value="取消">
                    </div>

                </div>
            </div>
        </div>
        <ol id="joyRideTipContent">
            <li data-class="so-awesome" data-text="关闭">
                <h2>选择贺卡样式</h2>
                <p>恭喜您支付成功，请点击选择您喜爱的贺卡样式送给好友</p>
            </li>
        </ol>
        <script type="text/javascript" src="~/Themes/RongJi/Style/greetingcard/js/jquery.min.js"></script>
        <script type="text/javascript" src="~/Themes/RongJi/Style/greetingcard/js/soundmanager2-jsmin.js"></script>
        <script type="text/javascript" src="~/Themes/RongJi/Style/greetingcard/js/jquery.joyride-2.1.js"></script>
        <script>
            $(function () {
                var mutiSub = false;
                setTimeout(function () { $('#gameTip').fadeIn(); }, 800);

                $("#cancel").click(function () {
                    $('#gameTip').fadeOut();

                    $('#joyRideTipContent').joyride({
                        autoStart: true,
                        postStepCallback: function (index, tip) {
                            if (index == 2) {
                                $(this).joyride('set_li', false, 1);
                            }
                        },
                        modal: true,
                        expose: true
                    });
                });

                $("#sumbit").click(function () {
                    if (mutiSub) {
                        return false;
                    }
                    var orderNumber = $.trim($("#orderNumber").val());
                    var realName = $.trim($("#realName").val());
                    var friendName = $.trim($("#friendName").val());
                    var cellPhone = $.trim($("#cellPhone").val());

                    if (orderNumber == '') {
                        alert('不存在的订单号');

                        return false;
                    }

                    if (realName == '') {
                        alert('请输入您的姓名');

                        return false;
                    }

                    if (friendName == '') {
                        alert('请输入您好友的姓名');

                        return false;
                    }

                    if (cellPhone == '') {
                        alert('请输入手机号码');

                        return false;
                    }

                    var reg = /^(\+\d{2,3}\-)?\d{11}$/;
                    if (!reg.test(cellPhone)) {
                        alert('请输入正确的手机号码');

                        return false;
                    }

                    var submitData = {
                        CustomerUserName: realName,
                        RecipientName: friendName,
                        RecipientCellPhone: cellPhone,
                        OrderNumber: orderNumber
                    };
                    mutiSub = true;
                    $.ajax({
                        type: "POST",
                        data: submitData,
                        dataType: "JSON",
                        url: "/Purchase/SendGreetingOrderSMS",
                        success: function (response) {
                            mutiSub = false;
                            if (response != null && response.Status == false && response.ErrorMessage == 'dataWrong') {
                                alert("请检查您填写的信息。");

                                return false;
                            }
                            else if (response.Status == true && response.ErrorMessage == 'sendSuccessfully') {
                                alert('发送成功！');
                                var url = "/MyAccount/OrderDetail?orderNumber=" + orderNumber;
                                setTimeout("location.href='" + url + "';", 3000);

                                return true;
                            }
                            else {
                                alert(response.ErrorMessage);
                                //window.location.href = "/myaccount/mypromotioncode?promotiontype=" + response.Tag;
                                return false;
                            }
                        },
                        error: function (err) {
                            mutiSub = false;
                            alert('异常错误！');
                            return false;
                        }
                    });
                });
            });

            $(window).load(function () {
                //$('#joyRideTipContent').joyride({
                //    autoStart: true,
                //    postStepCallback: function (index, tip) {
                //        if (index == 2) {
                //            $(this).joyride('set_li', false, 1);
                //        }
                //    },
                //    modal: true,
                //    expose: true
                //});
            });
        </script>
    </body>
</html>
